import { defineConfig } from "vite";
// 引入插件 - 不用每个页面都引用ref，reactive
import AutoImport from "unplugin-auto-import/vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import { svgBuilder } from "./src/plugins/svgBuilder";

export default defineConfig({
  base: "./", //项目部署的基础路径
  resolve: {
    // 别名设置 组件@/引用配置
    alias: {
      "~": path.resolve(__dirname, "./"),
      "@": path.resolve(__dirname, "src"),
    },
    // 导入文件时，需要省略的扩展名列表，不过官方建议是尽量不要将 .vue 给省略了。
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
  },
  // 代理配置
  server: {
    host: "0.0.0.0",
    port: 5173, // 代理
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/list-api": {
        target: "http://localhost:5001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/list-api/, ""),
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router", "vuex"],
    }),
    svgBuilder("./src/components/svg/svg/"),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/assets/styles/variables.scss" as *;`, // 引入scss变量
      },
    },
  },
});
